<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    @select="handleSelect"
    background-color="#566772"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">切割机</template>
      <el-menu-item-group>
        <el-menu-item style="min-width: 180px" index="1-1">切割机1</el-menu-item>
        <el-menu-item style="min-width: 180px" index="1-2">切割机2</el-menu-item>
        <el-menu-item style="min-width: 180px" index="1-3">切割机3</el-menu-item>
        <el-menu-item style="min-width: 180px" index="1-4">切割机4</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">自动焊机</template>
      <el-menu-item-group class="menu2">
        <el-menu-item style="min-width: 180px" index="2-1">焊机1</el-menu-item>
        <el-menu-item style="min-width: 180px" index="2-2">焊机2</el-menu-item>
        <el-menu-item style="min-width: 180px" index="2-3">焊机3</el-menu-item>
        <el-menu-item style="min-width: 180px" index="2-4">焊机4</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'SideMenu',
  data () {
    return {
      id: ''
    }
  },
  methods: {
    handleSelect (key) {
      if (key === '2-1' || key === '2-2' || key === '2-3' || key === '2-4') {
        this.$router.push({
          path: '/monitorIndex/hanji',
          query: {
            equipId: key
          }
        })
      } else if (key === '1-1' || key === '1-2' || key === '1-3' || key === '1-4') {
        this.$router.push({
          path: '/monitorIndex/qiegeji',
          query: {
            equipId: key
          }
        })
        // this.id = key
        // this.$emit('equipSelect')
      }
    }
  }
}
</script>

<style scoped>
.group2 {
  margin-right: 50px;
  padding-right: 10px;
  color: #566772;
}
</style>
